<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref,reactive} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const props = defineProps({
  role: String,
})
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const showCurrentPwd = ref(false)
const showNewPwd = ref(false)
const showRetypePwd = ref(false)
const pwdValue = reactive({
  currentPwd: "",
  newPwd: "",
  retypePwd: "",
})
defineExpose({
  showModal,
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md">Edit Account</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div class="mb-[100px] s2k:mb-[75px] s4k:mb-[70px]">
        <p class="text-[20px] mt-[32px] font-[600] font-Inter text-[var(--theme-font-color)]">Edit Account</p>
        <p class="text-md text-[var(--theme-font-desc-color)] mt-[3px]" v-show="role === 'Admin'">This is a SuperUser account. It cannot be deleted</p>
        <p class="text-md text-[var(--theme-font-desc-color)] mt-[32px] mb-[16px]">Change Password</p>
        <div class="flex flex-col justify-start items-start mt-[16px] relative" v-show="role !== 'Admin'">
          <p class="text-sm text-[var(--theme-font-color)]">Enter current password</p>
          <input :type="showCurrentPwd ? 'text' : 'password'" id="input" v-model="pwdValue.currentPwd">
          <svg-icon name="eye" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[60%] s2k:top-[56%] s4k:top-[55%]" width="12px" height="12px"
                    @click="showCurrentPwd = !showCurrentPwd"></svg-icon>
        </div>
        <div class="flex flex-col justify-start items-start mt-[16px] relative">
          <p class="text-sm text-[var(--theme-font-color)]">Enter new password</p>
          <input :type="showNewPwd ? 'text' : 'password'" id="input" v-model="pwdValue.newPwd">
          <p class="text-md text-[#9CA3AF] mt-[5px]">Password must be longer than 6 characters</p>
          <svg-icon name="eye" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[42%] " width="12px" height="12px"
                    @click="showNewPwd = !showNewPwd"></svg-icon>
        </div>
        <div class="flex flex-col justify-start items-start mt-[16px] relative">
          <p class="text-sm text-[var(--theme-font-color)]">Retype new password</p>
          <input :type="showRetypePwd ? 'text' : 'password'" id="input" v-model="pwdValue.retypePwd">
          <svg-icon name="eye" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[57%]" width="12px" height="12px"
                    @click="showRetypePwd = !showRetypePwd"></svg-icon>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-between items-center">
        <div class="flex flex-row justify-start ml-[1rem]">
          <div class="w-[160px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex cursor-pointer s4k:rounded-[8px]">
            <span class="m-auto">Apply Changes</span></div>
          <div class="w-[88px] h-[41px] font-[500] text-white font-Medium text-md bg-[var(--grid)] ml-[8px] rounded-lg flex cursor-pointer s4k:rounded-[8px]" @click="closeModal">
            <span class="m-auto">Cancel</span></div>
        </div>
        <div v-show="role !== 'Admin'" class="w-[100px] h-[41px] font-[500] text-white font-Medium text-md bg-[#E02424] rounded-lg mr-[1rem] cursor-pointer flex flex-row justify-center items-center s4k:rounded-[8px]">
          <svg-icon name="dele" class="svgLogo cursor-pointer s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
          <span class="ml-[6px]">Delete</span>
        </div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 440px;
    height: auto;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4 {
      padding-right: 0.4rem;
    }
    .p-6 {
      padding:  1rem;
      padding-top: 0;
      padding-right: 2rem;
    }
  }
}

#input {
  width: 100%;
  height: 37px;
  padding: 0;
  padding-left: 10px;
  font-size: 14px;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 8px;
  margin-top: 6px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      .p-4{
        padding: 0.8rem;
        padding-right: 0.4rem;
      }
      .p-6 {
        padding:  0.8rem;
        padding-right: 1.6rem;
        margin-top: -20px;
        margin-bottom: 20px;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding: 0.6rem;
        padding-right: 0rem;
      }
      .p-6 {
        padding:  0.6rem;
        padding-right: 1rem;
      }
    }
  }
}
</style>
